<template>
    <aside class="l_right">
        <div class="widgets">
            <div class="widget-wrapper markdown">
                <img style="width: 100%; ; border-radius: 20px;"
                    src="https://img.zcool.cn/community/01dbf15ff6e25611013ee04d85473e.gif"
                    title="图片来源于《zcool站酷》的插画师--`丢丢`">
            </div>
            <div class="widget-header cap theme dis-select"><span class="name">近期动态 </span></div>
            <div class="widget-wrapper timeline">
                <div class="widget-body fs14">
                    <div class="tag-plugin timetmpl timeline">
                        <div v-show="topTalks.length > 0">
                            <div class="timenode" index="1722914748471" v-for=" item in topTalks" :key="item.id">
                                <div class="header">
                                    <div class="user-info" style="display: flex; align-items: center;height: 30px;">
                                        <img style="height: 30px;" :src="item.avatar">
                                        <span style="padding: 8px;">{{ item.nickname }}</span>
                                    </div>
                                    {{ formatDate(item.createTime) }}
                                </div>
                                <div class="body">
                                    <div class="timetmpl_meta timetmpl_mobile"
                                        style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                                        <div>展位1</div>
                                        <div>展望2</div>
                                    </div>
                                    <div style="padding: 8px;"> {{ item.content }} </div>

                                    <div class="tag-plugin gallery fancybox flow-box" size="mix" ratio="square"
                                        :style="{columnCount: Math.round(item.imgs.length/Math.round(Math.sqrt(item.imgs.length))) }">
                                        <div class="flow-cell" v-for="(image, index) in item.imgs" :key="index">
                                            <img class="lazy entered loaded" :src="image" :data-src="image"
                                                data-ll-status="loaded">
                                            <div class="image-meta"></div>
                                        </div>
                                    </div>
                                    <div class="footer"
                                        style="display: flex;justify-content: space-between;align-items: center;">
                                        <div>
                                            <div class="flex left timetmpl_mobile">
                                                <div style="filter: none;display: flex;text-align: center;font-size: smaller;grid-gap:unset"
                                                    class="social-wrap">占位</div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex center timetmpl_mobile">占位</div>
                                        </div>
                                        <div>
                                            <div class="flex right">
                                                <div
                                                    style="display: flex;align-items: center;font-style: italic;font-family: cursive;font-size: smaller;">
                                                    <div class="widget-body related-posts fs14"
                                                        style="display: flex; align-items: center; color: var(--text-p1); margin: 0; font-size: smaller;">
                                                        --&nbsp;An &nbsp;Zhi &nbsp;Nai &nbsp;Tu&nbsp;
                                                        <img style="width: 1.5rem;max-height: 1rem; margin-left: 4px; border-radius: 0.5rem;"
                                                            :src="item.imgs[item.imgs.length - 1]"
                                                            alt="Related Post Image">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="timenode" index="1722914748471" v-for=" item in talks" :key="item.id">
                            <div class="header" v-show="item.isTop===0">
                                <div class="user-info" style="display: flex; align-items: center;height: 30px;">
                                    <img style="height: 30px;" :src="item.avatar">
                                    <span style="padding: 8px;">{{ item.nickname }}</span>
                                </div>
                                {{ formatDate(item.createTime) }}
                            </div>
                            <div class="body" v-show="item.isTop===0">
                                <div class="timetmpl_meta timetmpl_mobile"
                                    style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                                    <div>展位1</div>
                                    <div>展望2</div>
                                </div>
                                <div style="padding: 8px;"> {{ item.content }} </div>

                                <div class="tag-plugin gallery fancybox flow-box" size="mix" ratio="square"
                                    :style="{ columnCount: Math.round(item.imgs.length/Math.round(Math.sqrt(item.imgs.length))) }">
                                    <div class="flow-cell" v-for="(image, index) in item.imgs" :key="index">
                                        <img class="lazy entered loaded" :src="image" :data-src="image"
                                            data-ll-status="loaded">
                                        <div class="image-meta"></div>
                                    </div>
                                </div>
                                <div class="footer"
                                    style="display: flex;justify-content: space-between;align-items: center;">
                                    <div>
                                        <div class="flex left timetmpl_mobile">
                                            <div style="filter: none;display: flex;text-align: center;font-size: smaller;grid-gap:unset"
                                                class="social-wrap">占位</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex center timetmpl_mobile">占位</div>
                                    </div>
                                    <div>
                                        <div class="flex right">
                                            <div
                                                style="display: flex;align-items: center;font-style: italic;font-family: cursive;font-size: smaller;">
                                                <div class="widget-body related-posts fs14"
                                                    style="display: flex; align-items: center; color: var(--text-p1); margin: 0; font-size: smaller;">
                                                    --&nbsp;An &nbsp;Zhi &nbsp;Nai &nbsp;Tu&nbsp;
                                                    <img style="width: 1.5rem;max-height: 1rem; margin-left: 4px; border-radius: 0.5rem;"
                                                        :src="item.imgs[item.imgs.length - 1]" alt="Related Post Image">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</template>

<script>
import { getTalks } from '@/api/talk';

export default {
    name: 'BlogRecentDev',
    data() {
        return {
            talks: [],
            topTalks: [],

        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            getTalks().then(res => {
                this.talks = res.data.records;
                this.topTalks = this.talks.filter(talk => talk.isTop === 1)
            })
        },
        formatDate(value) {
            if (!value) return '';
            const date = new Date(value);
            return date.toLocaleString('zh-CN', { hour12: false }); // 你可以根据需要调整日期时间格式  
        }
    }
}
</script>

<style lang="scss">
.l_right {
    margin-top: 45px;
}
</style>